<template>
  <div class="register">
    <div class="register-left">
      <img src="@/assets/images/login/bg_0.png" alt="">
    </div>
    <div class="register-right">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
        <img class="logo-img" src="@/assets/images/logo.png" alt="">
        <!-- <h3 class="title">九步法后台管理系统</h3> -->
        <el-form-item prop="username" label="注册账号">
          <el-input class="register-input" v-model="registerForm.username" type="text" auto-complete="off" placeholder="请输入注册账号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="注册密码">
          <el-input class="register-input" v-model="registerForm.password" type="password" auto-complete="off" placeholder="请输入密码"
            @keyup.enter.native="handleRegister">
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword" label="确认密码">
          <el-input class="register-input" v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="请再次输入密码"
            @keyup.enter.native="handleRegister">
          </el-input>
        </el-form-item>
       <!-- <el-form-item prop="deptId" label="归属组织">
          <div class="w">
            <el-cascader
              class="register-input w"
              :show-all-levels="false"
              clearable
              placeholder="请选择归属组织"
              v-model="registerForm.deptId"
              :props="{value:'id',checkStrictly:true}"
              :options="options"></el-cascader>
          </div>-->
          <!-- <el-input  v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="请选择归属组织"
            @keyup.enter.native="handleRegister">
          </el-input> -->
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled" label="图形验证码">
          <div class="flex w">
            <div style="width: 63%">
              <el-input class="register-input" v-model="registerForm.code" auto-complete="off" placeholder="验证码"
                @keyup.enter.native="handleRegister">
              </el-input>
            </div>
            <div class="register-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button class="register-btn" :loading="loading" size="medium" type="primary" style="width:100%;"
            @click.native.prevent="handleRegister">
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
          <div class="login">
            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!--  底部  -->
    <!-- <div class="el-register-footer">
      <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
  import {
    getCodeImg,
    register
  } from "@/api/login";
import { deptTree } from "@/api/system/dept";
  export default {
    name: "Register",
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.registerForm.password !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        codeUrl: "",
        registerForm: {
          username: "",
          password: "",
          confirmPassword: "",
          deptId:"",
          code: "",
          uuid: ""
        },
        registerRules: {
          username: [{
              required: true,
              trigger: "blur",
              message: "请输入您的账号"
            },
            {
              min: 2,
              max: 20,
              message: '用户账号长度必须介于 2 和 20 之间',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              trigger: "blur",
              message: "请输入您的密码"
            },
            {
              min: 5,
              max: 20,
              message: "用户密码长度必须介于 5 和 20 之间",
              trigger: "blur"
            },
            {
              pattern: /^[^<>"'|\\]+$/,
              message: "不能包含非法字符：< > \" ' \\\ |",
              trigger: "blur"
            }
          ],
          confirmPassword: [{
              required: true,
              trigger: "blur",
              message: "请再次输入您的密码"
            },
            {
              required: true,
              validator: equalToPassword,
              trigger: "blur"
            }
          ],
          code: [{
            required: true,
            trigger: "change",
            message: "请输入验证码"
          }]
        },
        loading: false,
        captchaEnabled: true,
        options: [],
      };
    },
    created() {
      this.getCode();
      this.getDeptTree();
    },
    methods: {
      // 获取组织架构
      getDeptTree(){
        deptTree(this.queryParams).then(response => {
          this.options = response.data
        });
      },
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
          if (this.captchaEnabled) {
            this.codeUrl = res.img;
            this.registerForm.uuid = res.uuid;
          }
        });
      },
      handleRegister() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            this.loading = true;
            let form = {...this.registerForm}
            if(form.deptId&&form.deptId[0]) form.deptId = form.deptId[form.deptId.length-1]
            register(form).then(res => {
              const username = this.registerForm.username;
              this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
                dangerouslyUseHTMLString: true,
                type: 'success'
              }).then(() => {
                this.$router.push("/login");
              }).catch(() => {});
            }).catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            })
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  .register-form {
    .el-form-item__label {
      font-size: 16px;
      color: #333333;
      font-weight: normal;
    }
  }

  .register-input .el-input__inner {
    height: 60px;
    background-color: #F5F6FA;
    padding: 0 15px;
    line-height: 60px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
  }

  .register-input .el-input__inner::-webkit-input-placeholder {
    color: #949494
  }

  .register-input .el-input__inner::-moz-placeholder {
    color: #949494
  }

  .register-input .el-input__inner::-ms-input-placeholder {
    color: #949494
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>

  .register {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    // background-image: url("../assets/images/login-background.jpg");
    background-size: cover;

    .register-left {
      height: 100%;

      img {
        height: 100%;
        // max-width: 40vh;
      }
    }

    .register-right {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
    }
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .register-form {
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0px 1px 20px 0px rgba(74, 121, 177, 0.1);
    width: 480px;
    padding: 45px;
  }

  .register-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .register-code {
    width: 130px;
    height: 60px;
    margin-left: 10px;
    // float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
      width: 100%;
      height: 60px;
    }
  }


  .el-register-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .register-code-img {
    height: 38px;
  }

  .logo-img {
    width: 374px;
    margin: 0 auto 30px;
  }
  .register-btn{
    height: 60px;
    background-color: #008FFF;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
    color: #ffffff;
    padding:0;
  }
  .login{
    text-align: center;
    margin-top: 20px;
    color: #008FFF;
  }
  .flex {
    display: flex;
  }

  .w {
    width: 100%;
  }
</style>
